<template>
  <div class="local-fee-management">
    <div class="page-header">
      <h1>本地费用管理</h1>
      <p>管理系统中的本地费用信息</p>
    </div>

    <div class="page-content">
      <el-card class="feature-card">
        <template #header>
          <div class="card-header">
            <span>本地费用功能</span>
          </div>
        </template>
        <div class="feature-content">
          <el-empty description="本地费用管理功能正在开发中">
            <el-button type="primary">开始使用</el-button>
          </el-empty>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

onMounted(() => {
  console.log('本地费用管理页面已加载')
  console.log('用户权限:', authStore.permissions)
})
</script>

<style lang="scss" scoped>
.local-fee-management {
  .page-header {
    margin-bottom: 24px;

    h1 {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin: 0 0 8px 0;
    }

    p {
      color: #666;
      margin: 0;
    }
  }

  .page-content {
    .feature-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
      }

      .feature-content {
        padding: 40px 0;
      }
    }
  }
}
</style>